<template>
  <div id="app"></div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
// import dayjs from 'dayjs';

export default {
  data() {
    return {
      // 历史数据
      datasets: null,
      // map 地图对象实例
      map: null,
    };
  },
  mounted() {
    this._createBaseMap();
  },
  methods: {
    _createBaseMap() {
      mapboxgl.accessToken =
        'pk.eyJ1IjoiY2hhbnBmIiwiYSI6ImNsNG1qMDExejAwNDgzam8zcGtiMW5sNmwifQ.J4K5kbkjtcAABsmIW7Z0Tw';

      const map = new mapboxgl.Map({
        container: 'app',
        //自己绘制的样式地图令牌
        antialias: true, //抗锯齿
        style: 'mapbox://styles/mapbox/dark-v10',
        center: [113.97923191113188, 22.589860256941634],
        // center: [-75.789, 41.874],
        zoom: 12,
        // maxZoom: 5.99,
        // minZoom: 4,
        // zoom: 5,
      });

      this.map = map;
      window.map = map;

      const typeMap = new Map([
        [
          'fill',
          {
            'fill-color': [
              'interpolate',
              ['linear'],
              ['get', 'ad_1'],
              1,
              'yellow',
              2,
              'blue',
              3,
              'green',
              4,
              'red',
              5,
              'purple',
              6,
              'brown',
              7,
              'black',
              8,
              'white',
              9,
              '#FF9800',
              10,
              '#9C27B0',
              11,
              '#607D8B',
              12,
              '#FF5722',
              14,
              '#3F51B5',
              15,
              '#8BC34A',
              16,
              '#009688',
              17,
              '#4CAF50',
              18,
              '#2196F3',
              19,
              '#F44336',
              20,
              '#673AB7',
              21,
              '#607D8B',
              22,
              '#795548',
              23,
              '#9E9E9E',
              24,
              '#FF9800',
              25,
              '#3F51B5',
            ],
            // 'fill-color': 'yellow',
            'fill-outline-color': 'red',
            // 'fill-translate': [100, 0],
          },
        ],
        [
          'circle',
          {
            'circle-radius': 10,
            // 'circle-radius': {
            //   stops: [
            //     [0, 0],
            //     [20, _pixelRadius],
            //   ],
            //   base: 2,
            // },
            // Color circle by earthquake magnitude  用颜色标出 PM2.5 的污染程度
            'circle-color': 'skyblue',
            'circle-stroke-color': 'transparent',
            'circle-stroke-width': 0, // 圆点的边框大小
          },
        ],
      ]);

      const startTime = '2022-06-15 00:00:00',
        endTime = '2022-06-15 23:59:59';

      map.on('load', () => {
        map.addSource('vectorSource', {
          type: 'vector',
          // tileSize: 4326,
          scheme: 'xyz',
          tiles: [
            // 'http://192.168.101.147:8081/tiles/{z}/{x}/{y}',
            // 'http://192.168.101.147:9080/pg_postgis_mvt/api/v1/{z}/{x}/{y}',
            `http://192.168.101.147:8088/tiles/${2}/${startTime}/${endTime}/{z}/{x}/{y}`,
            // 'http://localhost:12306/geoserver/gwc/service/tms/1.0.0/cite%3Aszjd@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf',
            // 'http://192.168.101.147:8081/tile1?t=vt&z={z}&x={x}&y={y}',
            // 'https://tiles-a.basemaps.cartocdn.com/vectortiles/carto.streets/v1/{z}/{x}/{y}.mvt',
            // 'http://192.168.101.147:8081/tile/{z}/{x}/{y}',
          ],
        });

        const type = 'fill';
        // 添加图层
        map.addLayer({
          id: 'vectorLayer',
          type,
          source: 'vectorSource',
          // 'source-layer': 'szjd',
          'source-layer': 'points',
          paint: typeMap.get(type),
        });

        let step = 1;
        const filter = ['==', 'ad_1', step];
        // map.setFilter('vectorLayer', filter);
        console.log('已准备');

        window.GO = () => {
          setInterval(() => {
            map.setFilter('vectorLayer', filter);
            step += 1;
            if (step === 18) {
              step = 1;
            }
            console.log('step :>> ', step);
            filter[2] = step;
          }, 1500);
        };

        // let step = 0;
        // let lastStep = data.features[featuresLen - 1].properties?.stepFlag;
        // console.log('lastStep :>> ', lastStep);
        // const filters = ['==', 'stepFlag', step];
        // setInterval(() => {
        //   // filterBy(map, step);
        //   filters[2] = step;
        //   map.setFilter('points-layer', filters);
        //   step = (step + 1) % lastStep;
        //   console.log('step :>> ', step);
        // }, 1000 / 10);

        // const filters = ['==', 'stepFlag', 0];
        // const reFlash = () => {
        //   filters[2] = step;
        //   map.setFilter('points-layer', filters);
        //   step = (step + 1) % lastStep;
        //   requestAnimationFrame(reFlash);
        // };
        // reFlash();
      });

      // let dataCount = 0;
      // console.log('d[dataCount] :>> ', d[dataCount]);
      // map.getSource('point').setData(d[dataCount]);
      // setInterval(function () {
      //   this.map.getSource('point').setData(d[dataCount]);
      //   dataCount = (dataCount + 1) % sectionRange[1];
      // }, 200);

      // zoom变化时打印zoom值
      map.on('zoom', function (e) {
        console.log('zoom :>> ', e.target.getZoom());
      });

      map.on('click', 'vectorLayer', function (e) {
        // console.log('click :>> ', e);
        const features = map.queryRenderedFeatures(e.point, {
          layers: ['vectorLayer'],
        });
        console.log('features :>> ', features);
      });
    },
  },
};
</script>

<style>
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#app {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}
</style>
